<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小熊快跑</title>
    <style>
        body{

            background-color: #151212;
        }
        .xiaox{
            display: inline-block;
            float:left;
            width: 200px;
            height:100px;
            /*background-color:#333;*/
            background-image:url(img/x.png);
            background-repeat:no-repeat;
            /* animation-name: xx;*/
            /*animation-duration:1s;*/
            margin-bottom: 100px;

            animation:xx .5s  steps(8) 0s infinite alternate,zt 1s  forwards;
        }
        @keyframes xx {

            0%{
                background-position:0,0;
            }
            100%{
                background-position:-1600px,0;
            }

        }
        @keyframes zt{
            0%{
              margin-left:0;
            }
            100%{
             margin-left:45%;
            }
        }
        .s{
            background-image: url(img/bj2.png);
            background-repeat: no-repeat;
            margin: auto;
            /*width:1210px;*/
            /*height:600px;*/
            /*animation:xx .5s  steps(8) 0s infinite alternate,*/
            animation:s 450s linear infinite;    }
        .s1{
            width:1920px;
            height:200px;
            /*background-image: url(img/bg1.png);*/
            background-repeat: no-repeat;
            margin: auto;
            text-align: center;
            /*width:1210px;*/
            /*height:600px;*/
            animation:s1 10s linear infinite alternate;
            overflow:hidden
        }
        .se{
            float:top;
            width:1920px;
            height:200px;
            background-color: #e1e0e0;
            margin-top: -10px;

        }
        @keyframes s1 {

            0%{
                margin-left:0;
            }
            100%{
                margin-left:-100px;
            }

        }
        @keyframes s {


            0%{
                background-position:0,0;
            }
            100%{
                background-position:-1840px,0;
            }


        }
    </style>
</head>
<body>

<div class="s"><img class="s1" src="img/bg1.png" alt="秀山"> <div class="se"><div class="xiaox"></div></div> </div>


</body>
</html>